<template>
  <div class="modal-content">
    <div class="modal-block">
      <div class="modal-header">
        <div class="modal-title">
          <div class="line"></div>
          {{title}}</div>
        <div @click="close" class="iconfont close icon-guanbi"></div>
      </div>
      <div class="modal">
        <div class="list" v-for="item in pointInfo" :key="item.id"  @click="oncloseDialog(item)">
          <div class="name">{{item.title}}</div>
        </div>
      </div>
    </div>
    <MarketDetails v-if="dialogShow" @closeMarketDetails="dialogShow=false" :title="name" width="960px" height="800px" :content="content"></MarketDetails>
  </div>
</template>

<script>
import MarketDetails from "@/components/Market/MarketDetails";
import {lgcsPostListApi} from "@/api/statistics-3";
export default {
  name: "Market",
  components: {MarketDetails},
  props:{
    width:{
      type:String,
      default:'1200px'
    },
    height:{
      type:String,
      default:'400px'
    },
    title:{
      type:String,
      default:''
    },
    id:{
      type: Number,
      default:0
    }
  },
  data(){
    return {
      pointInfo:[

      ],
      dialogShow:false,
      content:'',
      name:''
    }
  },
  emits:['closeMarket'],
  methods:{
    oncloseDialog(e) {
        this.dialogShow = true
        this.content = e.content
        this.name = e.name
    },
    lgcsPostList(){
      lgcsPostListApi({'location-id': this.id}).then((res)=>{
        if(res.status===200){
            this.pointInfo = res.result;
        }
      })
    },
    close(){
      this.$emit('closeMarket')
    }
  },
  computed:{

  },
  mounted() {
    this.lgcsPostList()
  }
}
</script>

<style scoped lang="scss">
.modal-content{
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.7);
  top: 0;
  left: 0;
  z-index: 2;
  .modal-block{
    width: 960px;
    z-index: 3;
    position: fixed;
    transform: translate(-50%,-50%);
    top: 54%;
    left: 50%;
    overflow:hidden;
    padding: 20px;
    border-radius: 5px;
    border: 1px solid #07a6ff;
    background: rgba(4,20,59,.7);
    .modal-header{
      width: 100%;
      height: 35px;
      position: relative;
      background: url("/static/images/statistical-title.png") no-repeat center left;
      .modal-title{
        color: #fff;
        position: absolute;
        font-size: 17px;
        top: -5px;
        left: 5px;
        display: flex;
        align-items: center;
        .line{
          width: 5px;
          height: 16px;
          background: #31A7FF;
          border-radius: 10px;
          margin-right: 6px;
        }
      }
      .close{
        color: #07a6ff;
        font-size: 20px;
        position: absolute;
        right: 0;
        cursor: pointer;
      }
    }
    .modal{
      width: 100%;
      height: calc(100% - 35px);
      overflow-y: auto;
      display: flex;
      //justify-content: center;
      margin-top: 80px;
      margin-bottom: 80px;
      flex-wrap: wrap;
      .list{
        border: 1px solid #0c1865;
        background: #164088;
        margin-right: 30px;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: calc((100% - 120px)/4);
        margin-top: 20px;
        height: 100px;
        .count{
          color: #ffffff;
          font-size: 30px;
        }
        .name{
          color: #ffffff;
        }
      }
    }
    .modal::-webkit-scrollbar-track {
      background-color: #041a41
    }

    .modal::-webkit-scrollbar {
      width: 7px;
      background-color: #041a41
    }

    .modal::-webkit-scrollbar-thumb {
      background-color: #022c5c;
      border-radius: 20px;
    }
  }
}
</style>
